<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>代理对象proxy基本用法</h1>
      <p>1.用于监听对象的读写过程</p>
      <p>2.功能比defineProperty更强大，更方便</p>
      <p>3.支持两个参数,第一个为代理目标,第二个为代理的处理对象</p>
    </div>
    <script>
      const person = {
        name: "xjq",
        age: 20,
      };
      //第一个参数为代理目标,第二个为处理对象
      const personProxy = new Proxy(person, {
        //get方法监听属性的访问
        //接收两个参数,第一个为代理的目标,第二个为外部所访问的属性名
        get(target, property) {
          // target是代理的目标对象,property是外部访问属性名
          console.log(target, property); //{name: "xjq", age: 20}'name'
          //   return 100; //这个作为返回值
          return property in target ? target[property] : undefined;
        },
        //set 方法监听属性设置的过程
        //第一个参数为目标对象,第二个参数为写入属性名称,第三个为写入的属性值
        set(target, property, value) {
          target[property] = value;
          //第一个为目标,第二个为写入的属性名称,第三个为写入的属性值
          console.log(target, property, value);
          //在下面的写入了prosonProxy.gender = true
          //因为target是目标,所以输出为{name:'xjq',age:20,gender:true}
          //因为property是写入的属性名称,所以输出为gender
          //因为value是写入的属性值,所以输出为yrue
        },
      });

      //   console.log(personProxy.name); //100  这是get方法第一个return的返回值
      console.log(personProxy.name); //xjq  这是get方法第二个return的返回值
      console.log(personProxy.nnnn); //undefined 这是访问不存在的属性

      personProxy.gender = true;
    </script>
  </body>
</html>
